<template>
    <div>
        <!-- 面包屑导航条位置 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

         <el-card class="box-card" >
            <!-- 搜索订单区域   -->
            <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" @clear="getOrdersList" clearable>
                <el-button slot="append" icon="el-icon-search" @click="getOrdersList"></el-button>
            </el-input> 
            <!-- 订单列表区域 -->
            <el-table :data="ordersList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="订单编号" prop="order_number"></el-table-column>
                <el-table-column label="订单价格" prop="order_price" width="90px"></el-table-column>
                <el-table-column label="是否付款" width="90px">
                    <!-- 通过作用域插槽来定义等级按钮的显示样式 -->
                    <template slot-scope="scope">
                        <el-tag type="warning"  size="mini" v-if="scope.row.order_pay == 0 ? true : false">未付款</el-tag>
                        <el-tag type="success"  size="mini" v-if="scope.row.order_pay == 1 ? true : false">已付款</el-tag>                    
                    </template>
                </el-table-column>
                <el-table-column label="是否发货" prop="is_send" width="90px"></el-table-column>
                <el-table-column label="下单时间" prop="create_time" width="150px">
                    <template slot-scope="scope">
                        {{scope.row.create_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140px">
                    <template >
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showBox" ></el-button>
                    <el-button type="danger" icon="el-icon-location" size="mini" @click="showLocationBox"></el-button>
                    </template>
                </el-table-column>
            </el-table>

                        <!-- //分页区域 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="parseInt(total)">
                </el-pagination>
            </div>

         </el-card> 
         <!-- 修改地址对话框  -->
        <el-dialog
        title="修改地址"
        :visible.sync="addialogVisible"
        width="50%"
        @close="addDialogClosed"
        >
        <el-form :model="addRessForm" :rules="addRessFormRules" ref="addRessFormRef" label-width="100px">
            <el-form-item label="省市区/县" prop="address1" >
                <!-- 分类选择框 -->
                        <el-cascader     
                            clearable
                            :options="cityData"                    
                            v-model="addRessForm.address1"
                        >
                        </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="address2" >
                <el-input v-model="addRessForm.address2" ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addialogVisible = false">取 消</el-button>
            <el-button type="primary">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 物流地址对话框 -->
        <el-dialog
        title="物流进度"
        :visible.sync="locationDialogVisible"
        width="50%"
        >
          <el-timeline >
            <el-timeline-item
            v-for="(activity, index) in locationInfo"
            :key="index"
            :timestamp="activity.time">
            {{activity.context}}
            </el-timeline-item>
        </el-timeline>          
        </el-dialog>
            
    </div>
</template>

<script>
import cityData from './citydata.js'
export default {
    data() {
        return {
             //获取列表的参数对象
            queryInfo: {
                query: '',
                //当前的页数
                pagenum: 1,
                //当前每页显示多少条数据
                pagesize: 10
            },
            total: '',
            //存放获取到的订单列表数据
            ordersList: [],
            addialogVisible: false,
            locationDialogVisible: false,
            addRessForm: {
                address1: '',
                address2: ''
            },
            addRessFormRules: {
                address1: [
                    { required: true, message: '请选择省市县', trigger: 'blur' } 
                ],
                address2: [
                    { required: true, message: '请填写详细地址', trigger: 'blur' } 
                ]
            },
            cityData,
            locationInfo: []
        };
    },
    created () {
        this.getOrdersList()
    },
    methods: {
        async getOrdersList () {
            const {data: res} = await this.$http.get('orders',{params: this.queryInfo})
            if(res.meta.status !==200) return this.$message.error('获取订单列表数据失败')
            this.ordersList = res.data.goods
            this.total = res.data.total
        },
        //监听pagesize改变的事件
        handleSizeChange (newSize) {
            this.queryInfo.pagesize = newSize
            this.getOrdersList()
        },
        //监听页码改变的事件
        handleCurrentChange (newPage) {
            this.queryInfo.pagenum = newPage
            this.getOrdersList()
        },
        //展示修改地址
        showBox () {
            this.addialogVisible = true   
        },
        addDialogClosed () {
            
            this.$refs.addRessFormRef.resetFields()
        },
        async showLocationBox () {
            // 测试号804909574412544580
            const {data: res} = await this.$http.get('kuaidi/804909574412544580')
            if(res.meta.status !== 200) return this.$message.error('获取物流信息失败')
            this.locationInfo = res.data
            console.log(this.locationInfo)
            this.locationDialogVisible = true
        }
    },
};
</script>

<style scoped lang="scss">
.el-cascader {
    width: 100%;
}
</style>
